import {uSelectMyAllDevStandRange} from '@/api/standard'
import {ProductFilesItem} from '@/components/others/productFilesItem'
import {CnBoldP, CnNormalP} from '@/components/text'
import {getUserId} from '@/libs/auth'
import {StandardCard} from './components/standardCard'
import useGlobalAPI from '@/hooks/useGlobalAPI'

export default defineComponent({
  name: 'dataOverview',
  setup(props, ctx) {
    const {route} = useGlobalAPI()
    const state = reactive<{
      standardModalVisible: boolean
      standardList: Standard.StandardData[]
      spinning: boolean
    }>({
      standardModalVisible: false,
      standardList: [],
      spinning: false
    })

    function getStandardList() {
      const userId = getUserId()
      if (!userId) return
      state.spinning = true
      uSelectMyAllDevStandRange({devId: route.query.devId})
        .then(res => {
          state.standardList = res.data
          state.spinning = false
        })
        .catch(err => {
          state.spinning = false
        })
    }

    onMounted(() => {
      getStandardList()
      console.log(route.query.devId, 'devId')
    })

    return () => (
      <div class='h-full'>
        <CnBoldP class='mt-11 text-20'>标准设置</CnBoldP>

        <CnNormalP class='mt-6 mb-8 text-4xText'>
          根据您的设置的合格标准，设备将根据您设置的标准检测水质，并判断是否异常
        </CnNormalP>

        <ProductFilesItem></ProductFilesItem>

        <a-spin class='h-full' spinning={state.spinning}>
          <div class='grid grid-cols-2 gap-y-20 gap-x-20'>
            {state.standardList.map(item => (
              <StandardCard
                standardData={item}
                onModelFinish={() => {
                  getStandardList()
                }}
                onStatusChange={() => {
                  getStandardList()
                }}
              ></StandardCard>
            ))}
          </div>

          {/* <CFormModal class='w-600' v-model={[state.standardModalVisible, 'visible']} title={`修改合格标准 设备:${state.currentDevName}`}>
          {{
            default: (changeVisible: ChangeVisible) =>
              <StandardForm
                changeVisible={changeVisible}
                devStandRange={state.currentDevStandRange}
                onFinish={getStandardList}
              ></StandardForm>
          }}
        </CFormModal> */}
        </a-spin>
      </div>
    )
  }
})
